<template>
    <el-dialog v-model="dialogVisible" title="添加分组" width="540">
        <el-form :model="formItem" label-width="80">
            <el-form-item label="权限名称:">
                <el-input v-model="formItem.title" clearable />
            </el-form-item>
            <el-form-item label="菜单图标:">
                <el-input v-model="formItem.icon" clearable />
            </el-form-item>
            <el-form-item label="跳转路径:">
                <el-input v-model="formItem.route_path" clearable />
            </el-form-item>
            <el-form-item label="组件路径:">
                <el-input v-model="formItem.component_path" clearable />
            </el-form-item>
            <el-form-item label="父级权限:">
                <el-cascader v-model="formItem.parentId" style="width: 412px;" :options="permissionData.rows"
                    :props="{ checkStrictly: true, value: '_id', label: 'title', emitPath: false }" clearable />
            </el-form-item>
            <el-form-item label="权限类型:">
                <el-select v-model="formItem.type" clearable>
                    <el-option label="菜单" value="menu"></el-option>
                    <el-option label="按钮" value="button"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="排序:">
                <!-- <el-input v-model="formItem.order" clearable /> -->
                <el-input-number v-model="formItem.order" />
            </el-form-item>
            <el-form-item label="是否显示:">
                <el-radio-group v-model="formItem.is_show">
                    <el-radio :value="1">是</el-radio>
                    <el-radio :value="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="onConfirm">确认</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { addPermissionApi, updatePermissionApi } from '@/api/permissionManage';
import { useFindData } from '@/composables/findData';
import { ref, watch } from 'vue';
const dialogVisible = ref(false);
const formItem = ref<any>({});
const emit = defineEmits(['getPermission'])
const openDialog = (item?: any) => {
    if (item) {
        formItem.value = { ...item }
    } else {
        formItem.value = {};
    }
    dialogVisible.value = true;
};
const { permissionData, getPermissionJoint, } = useFindData();


defineExpose({
    openDialog
})
watch(dialogVisible, () => {
    getPermissionJoint({ creator: 'zhangjunling', });
})



function addPermission() {
    addPermissionApi({
        ...formItem.value,
        parentId: formItem.value.parentId ?? '0',
        creator: 'zhangjunling',
    }).then(res => {
        if (res.code == 200) {
            ElMessage({
                type: 'success',
                message: '添加用户成功',
            });
            emit('getPermission');
        } else {
            ElMessage.error(res.message);
        }
    })
}

function updatePermission() {
    updatePermissionApi({
        ...formItem.value,
        parentId: formItem.value.parentId ?? '0',
        creator: 'zhangjunling',
    }).then(res => {
        if (res.code == 200) {
            ElMessage({
                type: 'success',
                message: '修改用户成功',
            });
            emit('getPermission')
        } else {
            ElMessage.error(res.message);
        }
    })
}


function onConfirm() {
    console.log(formItem.value);
    if (formItem.value._id) {
        updatePermission();
    } else {
        addPermission();
    }
    dialogVisible.value = false;
}
</script>

<style scoped>
.el-input,
.el-select {
    width: 412px;

}
</style>
<style></style>
